<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌管理</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .brand-image {
            max-width: 80px;
            max-height: 80px;
            border-radius: 4px;
        }

        .action-buttons button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">品牌管理</h4>
            <button class="btn btn-primary" onclick="openAddModal()">
                <i class="fas fa-plus"></i> 新增品牌
            </button>
        </div>
        <div class="card-body">
            <table class="table table-hover" id="brandTable">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>品牌图片</th>
                    <th>品牌名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 新增模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增品牌</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <div class="mb-3">
                        <label for="addBrandName" class="form-label">品牌名称</label>
                        <input type="text" class="form-control" id="addBrandName" required>
                    </div>
                    <div class="mb-3">
                        <label for="addBrandImage" class="form-label">品牌图片</label>
                        <input type="file" class="form-control" id="addBrandImage" accept="image/*" required>
                        <div class="form-text">请上传品牌Logo图片</div>
                    </div>
                    <div class="mb-3">
                        <label for="addBrandDesc" class="form-label">品牌描述</label>
                        <textarea class="form-control" id="addBrandDesc" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitAddForm()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 更新模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">更新品牌</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="updateForm">
                    <input type="hidden" id="updateBrandId">
                    <div class="mb-3">
                        <label for="updateBrandName" class="form-label">品牌名称</label>
                        <input type="text" class="form-control" id="updateBrandName" required>
                    </div>
                    <div class="mb-3">
                        <label for="updateBrandImage" class="form-label">品牌图片</label>
                        <input type="file" class="form-control" id="updateBrandImage" accept="image/*">
                        <div class="mt-2">
                            <img id="currentBrandImage" src="" alt="当前品牌图片" class="brand-image">
                            <span id="imageFilename" class="ms-2"></span>
                        </div>
                        <div class="form-text">如需更换图片请重新上传，否则留空</div>
                    </div>
                    <div class="mb-3">
                        <label for="updateBrandDesc" class="form-label">品牌描述</label>
                        <textarea class="form-control" id="updateBrandDesc" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitUpdateForm()">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除该品牌吗？此操作不可恢复。</p>
                <input type="hidden" id="deleteBrandId">
                <div class="alert alert-warning mt-3">
                    <i class="fas fa-exclamation-triangle"></i> 警告：删除品牌将同时删除所有关联产品！
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS 和 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 模拟数据 -->
<script>
    // 模拟品牌数据
    let brands = [
        {
            id: 1,
            name: "苹果",
            imagePath: "https://via.placeholder.com/80x80?text=Apple",
            description: "美国科技公司",
            createdAt: "2023-01-15"
        },
        {
            id: 2,
            name: "三星",
            imagePath: "https://via.placeholder.com/80x80?text=Samsung",
            description: "韩国电子公司",
            createdAt: "2023-02-20"
        },
        {
            id: 3,
            name: "华为",
            imagePath: "https://via.placeholder.com/80x80?text=Huawei",
            description: "中国科技公司",
            createdAt: "2023-03-10"
        },
        {
            id: 4,
            name: "小米",
            imagePath: "https://via.placeholder.com/80x80?text=Xiaomi",
            description: "中国智能手机品牌",
            createdAt: "2023-04-05"
        },
        {
            id: 5,
            name: "索尼",
            imagePath: "https://via.placeholder.com/80x80?text=Sony",
            description: "日本电子公司",
            createdAt: "2023-05-18"
        }
    ];

    // 页面加载时初始化表格
    $(document).ready(function () {
        loadBrandTable();
    });

    // 加载品牌表格
    function loadBrandTable() {
        const tbody = $('#brandTable tbody');
        tbody.empty();

        brands.forEach(brand => {
            const row = `
                    <tr>
                        <td>${brand.id}</td>
                        <td><img src="${brand.imagePath}" alt="${brand.name}" class="brand-image"></td>
                        <td>${brand.name}</td>
                        <td>${brand.createdAt}</td>
                        <td class="action-buttons">
                            <button class="btn btn-sm btn-outline-primary" onclick="openUpdateModal(${brand.id})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="openDeleteModal(${brand.id})">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                `;
            tbody.append(row);
        });
    }

    // 打开新增模态框
    function openAddModal() {
        $('#addForm')[0].reset(); // 重置表单
        $('#addModal').modal('show');
    }

    // 打开更新模态框
    function openUpdateModal(id) {
        const brand = brands.find(b => b.id === id);
        if (!brand) return;

        $('#updateBrandId').val(brand.id);
        $('#updateBrandName').val(brand.name);
        $('#updateBrandDesc').val(brand.description);
        $('#currentBrandImage').attr('src', brand.imagePath);
        $('#imageFilename').text(''); // 清空文件名显示

        $('#updateModal').modal('show');
    }

    // 打开删除确认模态框
    function openDeleteModal(id) {
        $('#deleteBrandId').val(id);
        $('#deleteModal').modal('show');
    }

    // 提交新增表单
    function submitAddForm() {
        const form = document.getElementById('addForm');
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }

        // 模拟提交 - 实际应用中这里应该是AJAX请求
        const newBrand = {
            id: brands.length > 0 ? Math.max(...brands.map(b => b.id)) + 1 : 1,
            name: $('#addBrandName').val(),
            description: $('#addBrandDesc').val(),
            imagePath: "https://via.placeholder.com/80x80?text=" + encodeURIComponent($('#addBrandName').val()),
            createdAt: new Date().toISOString().split('T')[0]
        };

        // 模拟文件上传 - 实际应用中需要处理文件上传逻辑
        const fileInput = document.getElementById('addBrandImage');
        if (fileInput.files && fileInput.files[0]) {
            // 这里应该有实际上传逻辑
            console.log('上传文件:', fileInput.files[0].name);
        }

        brands.push(newBrand);
        loadBrandTable();

        $('#addModal').modal('hide');
        showToast('品牌添加成功', 'success');
    }

    // 提交更新表单
    function submitUpdateForm() {
        const form = document.getElementById('updateForm');
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }

        const id = parseInt($('#updateBrandId').val());
        const brandIndex = brands.findIndex(b => b.id === id);

        if (brandIndex === -1) return;

        // 模拟文件上传 - 实际应用中需要处理文件上传逻辑
        const fileInput = document.getElementById('updateBrandImage');
        let imagePath = brands[brandIndex].imagePath; // 默认使用原图片

        if (fileInput.files && fileInput.files[0]) {
            // 这里应该有实际上传逻辑
            console.log('上传新文件:', fileInput.files[0].name);
            imagePath = "https://via.placeholder.com/80x80?text=" + encodeURIComponent($('#updateBrandName').val());
            $('#imageFilename').text(fileInput.files[0].name);
        }

        // 更新品牌信息
        brands[brandIndex] = {
            ...brands[brandIndex],
            name: $('#updateBrandName').val(),
            description: $('#updateBrandDesc').val(),
            imagePath: imagePath
        };

        loadBrandTable();
        $('#updateModal').modal('hide');
        showToast('品牌更新成功', 'success');
    }

    // 确认删除
    function confirmDelete() {
        const id = parseInt($('#deleteBrandId').val());
        brands = brands.filter(b => b.id !== id);

        loadBrandTable();
        $('#deleteModal').modal('hide');
        showToast('品牌删除成功', 'success');
    }

    // 显示提示消息
    function showToast(message, type = 'info') {
        const toast = `
                <div class="toast align-items-center text-bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            ${message}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            `;

        const toastContainer = $('#toastContainer');
        if (toastContainer.length === 0) {
            $('body').append('<div id="toastContainer" style="position: fixed; top: 20px; right: 20px; z-index: 1000;"></div>');
        }

        $('#toastContainer').append(toast);
        const toastElement = $('#toastContainer .toast').last();
        const toastInstance = new bootstrap.Toast(toastElement[0]);
        toastInstance.show();

        // 5秒后自动移除
        setTimeout(() => {
            toastElement.remove();
        }, 5000);
    }
</script>
</body>
</html>